Вращающийся куб баннер

Скрипт 3D баннера


<style> .wrap { -webkit-perspective: 500px; -ms-perspective: 500px; perspective: 500px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; float: left; margin-right: 100px; } .cube { position: relative; margin: 20px; width: 70px; height: 70px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .face { display: block; position: absolute ; top: 0; left: 0; width: 70px; height: 70px; padding: 5px 3px; color: #1F0405; font-size: 16px; text-align: center; line-height: 70px; border-radius: 4px; box-shadow: inset 0 0 0 2px #705E5F; } .front { -webkit-transform: translateZ(38px); -ms-transform: translateZ(38px); transform: translateZ(38px); background: #fff; } .back { -webkit-transform: translateZ(-38px) rotateY(-180deg); -ms-transform: translateZ(-38px) rotateY(-180deg); transform: translateZ(-38px) rotateY(-180deg); background: #fff; } .left { -webkit-transform: translateX(-38px) rotateY(-90deg); -ms-transform: translateX(-38px) rotateY(-90deg); transform: translateX(-38px) rotateY(-90deg); background: #fff; } .rght { -webkit-transform: translateX(38px) rotateY(90deg); -ms-transform: translateX(38px) rotateY(90deg); transform: translateX(38px) rotateY(90deg); background: #fff; } .rotate-y { -webkit-animation: spinY 10s infinite linear; -ms-animation: spinY 10s infinite linear; animation: spinY 10s infinite linear; } @-webkit-keyframes spinY { from { -webkit-transform: rotateY(0); -ms-transform: rotateY(0); transform: rotateY(0); } to { -webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes spinY { from { -webkit-transform: rotateY(0); -ms-transform: rotateY(0); transform: rotateY(0); } to { -webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); } } </style> <div id="wrap" class="wrap"> <div class="cube"> <div id="cube" class="cube rotate-y"> <p class="face back">PHP</p> <p class="face front">HTML</p> <p class="face left">CSS</p> <p class="face rght">MOUNY</p> </div> </div> </div>

PHP

HTML

CSS

MOUNY